<template>
	<div class="uu-search" :class="{'is-select': !isDown}">
		<div class="uu-search-wrap">
			<el-form :inline="true" :model="formData1" class="uu-form" ref="formData1" :rules="rule" label-width="60px" label-position="left">
				<div>
					<el-form-item v-for="item, key in formInline" :key="key" :prop="key" :label="item.label">
						<el-input v-if="item.type === 'input'" :placeholder="item.placeholder" v-model="formData1[key]" :disabled="item.disabled"></el-input>
						<template v-if="item.type === 'select'">
							<el-select :placeholder="item.placeholder" :disabled="item.disabled" v-model="formData1[key]">
								<el-option v-for="option, index in item.options" :key="option[item.value]" :value="option[item.value]" :label="option[item.name]"></el-option>
							</el-select>
						</template>
						<template v-else-if="item.type === 'time'">
							<el-time-picker :is-range="item.isRange" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="请选择时间" range-separator="至" v-model="formData1[key]" align="right" :picker-options="{start: item.start ? item.start : '00:00' , end: item.end ? item.end : '23:59' , step: item.step ? item.step :  '00:01'}">
							</el-time-picker>
						</template>
						<template v-else-if="item.type === 'date'">
							<el-date-picker align="right" v-model="formData1[key]" :type="item.datetype" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期">
							</el-date-picker>
						</template>
            		</el-form-item>
				</div>
			</el-form>
			<div class="uu-search-button">
				<el-button-group>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button v-if="isSelect" @click="isDown = !isDown">
						<i class="el-icon-arrow-down" v-if="isDown"></i>
						<i class="el-icon-arrow-up" v-else></i>
					</el-button>
				</el-button-group>
			</div>
		</div>
  	</div>
</template>

<script>
	export default {
		data() {
			return {
				isDown: true,
				formData1: {},
			}
		},
		props: {
			formData: {
				type: Object,
				default: () => {}
			},
			rules: {
				type: Object,
				default: () => {}
			},
			isSelect: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 获取数据类型
			getType(obj) {
				return {}.toString.call(obj).slice(8, -1).toLowerCase();
			},
			// 处理时间
			coverFormDate(obj) {
				Object.keys(obj).map(item => {
					if (this.formInline[item].type === 'time') {
						let isRange = this.formInline[item].isRange;
						if (!isRange) obj[item] = this.coverTime(obj[item]);
						else obj[item] = this.coverTimerange(obj[item]);
					} else if (this.formInline[item].type === 'date') {
						let datetype = this.formInline[item].datetype.split('').map((item, index) => index ? item : item.toUpperCase()).join('');
						obj[item] = this['cover' + datetype](obj[item]);
					}
				})
			},
			// 处理年
			coverYear(date) {
				if (!date) return '';
				return this.coverDay(date).slice(0, 4);
			},
			// 处理月
			coverMonth(date) {
				if (!date) return '';
				return this.coverDay(date).slice(0, -3);
			},
			// 处理日期
			coverDate(date) {
				if (!date) return '';
				if (this.getType(date) === 'string') date = new Date(date);
				if (this.getType(date) === 'date') return date.toLocaleDateString().split(/\/|年|月|日/).filter(item => item).map(item => item < 10 ? '0' + item : item).join('-');
				return date;
			},
			// 处理日期和时间
			coverDatetime(date) {
				if (!date) return '';
				return this.coverDate(date) + ' ' + this.coverTime(date);
			},
			// 处理日期范围
			coverDaterange(arr) {
				if (!arr || !arr[0]) return '';
				return arr.map(date => {
					if (this.getType(date) === 'date') {
						return this.coverDate(date);
					}
					return date;
				}).join(',');
			},
			// 处理日期时间范围
			coverDatetimerange(arr) {
				if (!arr || !arr[0]) return '';
				return arr.map(date => {
					if (this.getType(date) === 'date') {
						return this.coverDatetime(date);
					}
				}).join(',')
			},
			// 处理时间
			coverTime(date) {
				if (!date) return '';
				if (this.getType(date) === 'string') date = new Date(date);
				return date.toTimeString().slice(0, 8);
			},
			// 处理时间范围
			coverTimerange(arr) {
				if (!arr) return '';
				if (!arr[0]) return '';
				return arr.map(date => {
					return this.coverTime(date);
				}).join(',');
			},
			onSubmit() {
				let obj = Object.assign({}, this.formData1);
				this.coverFormDate(obj);
				this.$emit('submit', obj);
			},
			resetFields() {
			}
		},
		created() {
		},
		computed: {
			formInline() {
				let obj = {};
				Object.keys(this.formData).map(item => {
					obj[item] = this.formData[item].init;
				})
				this.formData1 = Object.assign({}, obj);
				return this.formData;
			},
			rule() {
				return this.rules;
			}
		}
	};
</script>

<style lang="less" scoped>
	.uu-search.is-select {
		height: auto;
		overflow: auto;
	}
</style>
